<template>
    <div class="main-header fn-marginright">
        <ul class="breadcumb">
          <li v-for="(item, i) in breadList" :key="i">
            <span>{{item.meta.title}}</span>
          </li>
        </ul>
        <a class="exit"><i class="iconfont icontuichu">退出</i></a>
    </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
       breadList: []
    }
  },
  watch: {
      $route(to) {
        //console.log(to)   //to this.$route路由对象
        let matched =to.matched; //this.$route.matched; //数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
        console.log(matched[0].name);
        this.getBreadcrumb(matched);
      }
    },
    methods:{
      getBreadcrumb(matched){
        //判断matched数组是否存在且数组中对象name的属性不是首页
        // if (matched.length && matched[0].name == "home") {
        //   matched = [{ path: "/home", name: 'home', meta: { title: "首页" }}];
        // }
        this.breadList = matched;
      }
    },
  created(){
    this.getBreadcrumb(this.$route.matched);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
